<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id ="app">
       <p>计数：{{counter}}</p>
       <cpn v-bind:child-counter="counter" v-on:change="changeCounter"></cpn>
    </div>
    <br>
    <template id="cpn">
        <div> 
            
        <button @click="increase()">+</button>
        <button @click="decrease()">-</button>
        </div>
    </template>


    <script>
        const cpn={
            template:'#cpn',
            data(){
            return{
                dCounter:this.childCounter
            }
            },
            props:{
                childCounter:Number
            },
            methods:{     
            increase(){  
                this.dCounter++
                this.$emit('change',this.dCounter)
            },
            decrease(){
                this.dCounter--
                this.$emit('change',this.dCounter)
            }
         },
        }
       let app =new Vue({
         el:"#app",
         data:{
          counter:1
         },
         components:{
                cpn
         },
         methods:{
            changeCounter(value){
                this.counter=value
            }
         }
       })
    </script>  
</body>
</html>